<template>
    <div class="container">
        <div class="pie" ref="pie"></div>
        <div class="checkout">
            <button @click="preChart">&lt;</button>
            <button @click="nextChart">&gt;</button>
        </div>
        <div class="names">{{ names }}</div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import http from '@/http';
const colorArr = ['#0BA82C', '#2C6EFF', '#16F2D9', '#FE211E', '#FA6900', '#EEDD78', '#73A373']
export default {
    data() {
        return {
            chartPie: null,
            dataIndex: 0,
            total: 0,
            names: '',
            option: {
                color: colorArr,
                title: {
                    text: '▎ 热销商品的占比',
                    left: '5%',
                    top: '5%',
                    textStyle: {
                        color: 'white',
                        fontSize: 14
                    }
                },
                tooltip: {
                    backgroundColor: 'rgba(0,0,0,.5)',
                    textStyle: {
                        color: 'white'
                    }
                },
                legend: {
                    left: 'center',
                    top: '15%',
                    textStyle: {
                        color: 'white',
                        fontSize: 8
                    },
                    icon: 'circle',
                    itemWidth: 15,
                    itemGap: 5
                },
                series: {
                    type: 'pie',
                    radius: '50%',
                    data: [],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        },
                        label: {
                            show: true,
                            color: 'inherit'
                        },
                        labelLine: {
                            show: false
                        }
                    },
                    label: {
                        show: false
                    },
                    top: '20%',
                    tooltip: {
                        formatter: (params) => {
                            let h = '';
                            params.data.children.forEach(item => {
                                let percent = (item.value / params.value * 100).toFixed(0)
                                h += `${item.name}:${percent}%<br/>`
                            });
                            return h
                        }
                    }
                }
            }
        }
    },
    methods: {
        async getData(index) {
            let ret = await http.get('/hot.json')
            // console.log(ret);
            this.total = ret.length
            this.option.series.data = ret[index].children
            this.names = ret[index].name
            this.chartPie.setOption(this.option)
        },
        preChart() {
            this.dataIndex--
            if (this.dataIndex < 0) {
                this.dataIndex = this.total - 1
            }
            this.getData(this.dataIndex)
        },
        nextChart() {
            this.dataIndex++
            if (this.dataIndex == this.total) {
                this.dataIndex = 0
            }
            this.getData(this.dataIndex)
        }
    },
    mounted() {
        this.chartPie = echarts.init(this.$refs.pie)
        this.getData(0)
        window.addEventListener('resize', () => {
            this.chartPie.resize()
        })
    }
}
</script>

<style lang="scss" scoped>
.container {
    height: 100%;
    position: relative;

    .pie {
        height: 100%;
        z-index: 1;
    }

    .checkout {
        width: 80%;
        position: absolute;
        padding: 0 10%;
        top: 50%;
        display: flex;
        justify-content: space-between;

        button {
            background-color: transparent;
            color: white;
            border: none;
            z-index: 2;
        }

        button:hover {
            cursor: pointer;
        }
    }

    .names {
        position: absolute;
        bottom: 5%;
        right: 10%;
        color: white;
        font-size: 14px;
    }
}
</style>